/* 
1.HTML精髓： 盒子模型
    * 把一个个的功能用盒子包起来，互不干扰
2.css样式精髓： 
    1.定位： position float  flex
    2.盒子模型： width/padding/border/margin/颜色
    3.文本：文字大小/文字颜色
    4.css3属性： 圆角 阴影

*/

/* 1.版心布局 */
body {
  background: url(../images/bg.jpg) no-repeat;
  /* 设置背景图填充模式： 铺满盒子
    因为背景图尺寸是1920px，如果大屏显示器就会留白
    */
  background-size: cover;
}

.container {
  margin: 0 auto;
  padding: 99px 20px 20px;
  /* 版心一般会使用min 和 max控制最大最小宽高 */
  min-width: 1200px;
  max-width: 1920px;
  /* 默认情况下body高度为0，盒子被内容撑开。 一般可以设置最低高度 */
  min-height: 780px;
  background: url(../images/logo.png) no-repeat;
  /* 设置背景图填充模式：自动缩放显示完整图片 */
  background-size: contain;

  /* 伸缩盒子 */
  display: flex;
}

.column {
  flex: 3;
  margin-top: -40px;
}

.column:nth-child(2) {
  flex: 4;
  margin: 0px 20px;
}

/* 2.通用面板 */

/* 边框背景图 */
.panel {
  border: 1px solid transparent;
  /* 边框背景图 */
  border-image: url(../images/border.png) 55 40 25 130 stretch;
  /* 单独设置边框宽度 */
  border-width: 55px 40px 25px 130px;
  position: relative;
}

/* 内容盒子 */
.panel .inner {
  position: absolute;
  left: -130px;
  top: -55px;
  right: -40px;
  bottom: -25px;
  padding: 20px 30px;
}

/*             第一列            */

/* 1.数据概览 */
.overview {
  height: 100px;
}

.overview .inner {
  /* 设置父元素伸缩盒子 */
  display: flex;
}

.overview .inner .item {
  flex: 1;
  font-size: 25px;
  color: #fff;
  text-align: center;
}

.overview .inner .item span {
  color: #2177c4;
  font-size: 16px;
}

/* 2.设备监控 */
.monitor {
  height: 474px;
  margin: 20px 0px;
}

/* 2.1 顶部tab栏 */
.monitor .tabs {
  display: flex;
}

.monitor .tabs a {
  font-size: 18px;
  padding: 0px 25px;
  color: #1340b7;
}

.monitor .tabs a:nth-child(2) {
  border-left: 2px solid #00f1f1;
}

.monitor .tabs a.active {
  color: #fff;
}

/* 2.2 content内容部分 */

/* 2.2.1 内容头部 */
.monitor .head {
  height: 35px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 15px -20px 0px;
  color: #68d8fe;
  line-height: 35px;
  /* 伸缩盒子 */
  display: flex;
}

.monitor .head span {
  flex: 1;
  text-align: center;
}

.monitor .head span:nth-child(2) {
  flex: 2;
  text-align: left;
  padding-left: 40px;
}

/* 2.2.2 轮播图容器盒子 */
.monitor .carousel-view {
  height: 350px;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 要撑开轮播图容器盒子宽度，不能给到子元素。因为它溢出部分隐藏了 */
  margin: 0px -20px;
}
/* 2.2.3 轮播图盒子 */
.monitor .carousel .row {
  height: 35px;
  line-height: 35px;
  color: #345d93;
  /* 伸缩盒子 */
  display: flex;
  /* 子绝父相 */
  position: relative;
}

.monitor .carousel .row span {
  flex: 1;
  text-align: center;
}

.monitor .carousel .row span:nth-child(3) {
  flex: 2;
  text-align: left;
  padding-left: 40px;
  /* 文字超出显示省略号 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monitor .carousel i {
  position: absolute;
  left: 5px;
  top: 12px;
  display: none;
}

/* row的hover效果 */
.monitor .carousel .row:hover {
  color: #68d8fe;
  background-color: rgba(255, 255, 255, 0.1);
}

.monitor .carousel .row:hover i {
  display: block;
}

/* 3.点位分布 */
.point {
  height: 336px;
}

.point h3 {
  color: #fff;
  font-size: 20px;
}

.point .chart {
  height: 238px;
  margin-top: 20px;
  /* 伸缩盒子 */
  display: flex;
}

.point .chart .pie {
  flex: 2;
  background-color: rgba(255, 255, 255, 0.1);
}

.point .chart .data {
  flex: 1;
  background: url(../images/rect.png) no-repeat;
  background-size: 100% 100%;
}

.point .chart .data .item {
  margin-top: 50px;
  text-align: center;
}

.point .chart .data .item h4 {
  font-size: 26px;
  margin-bottom: 10px;
  color: #fff;
}

.point .chart .data .item span {
  color: #2c9bfd;
}

/*             第二列            */

/* 1.地图 */
.map h3 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 10px;
}

.map .china {
  height: 518px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* 2.用户统计 */
.user{
  height: 336px;
  margin-top: 20px;
}

.user h3{
  font-size: 20px;
  color:#fff;
}

.user .chart{
  height: 238px;
  margin-top: 20px;
  /* 伸缩 */
  display: flex;
}

.user .chart .bar{
  flex: 3;
  background-color: rgba(255, 255, 255, 0.1);
}

.user .chart .data{
  flex: 1;
  background: url(../images/rect.png) no-repeat;
  background-size: 100% 100%;
}

.user .chart .data .item {
  margin-top: 50px;
  text-align: center;
}

.user .chart .data .item h4 {
  font-size: 26px;
  margin-bottom: 10px;
  color: #fff;
}

.user .chart .data .item span {
  color: #2c9bfd;
}


/*             第三列            */

/* 1.订单统计 */
.order{
  height: 146px;
}

.order .filter{
  height: 18px;
}

.order .filter a{
  padding: 0px 20px;
  border-right: 2px solid #00f1f1;
  color:#1950c4;
  font-size: 17px;
}

.order .filter a:last-child{
  border-right-color: transparent;
}

/* 点击效果 */
.order .filter a.active{
  color: #fff;
}

.order .data{
  /* 父盒子伸缩 */
  display: flex;
}

.order .data .item{
  width: 50%;
  margin-top: 30px;
  padding-left: 15px;
}

.order .data h4{
  font-size: 20px;
  color: #fff;
  margin-bottom: 10px;
}

.order .data span{
  color: #2c9bfd;
}

/* 2.销售额统计 */
.sale{
  height: 245px;
  margin-top: 20px;
}

.sale .head{
  height: 18px;
  line-height: 18px;
  /* 父盒子伸缩 */
  display: flex;
}

.sale .head h3{
  font-size: 20px;
  color: #fff;
}

.sale .head .filter{
  border-left: 2px solid #00f1f1;
  margin-left: 15px;
}

.sale .head .filter a{
  padding: 5px;
  margin-left: 8px;
  color:#0bace6;
  font-size: 17px;
}

/* a选中样式 */
.sale .head .filter a.active{
  background-color: #4c9bfd;
  color:#fff;
  border-radius: 5px;
}

.sale .line{
  height: 156px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-top: 20px;
}

/* 3.渠道分布与季度销售 */
.wrap{
  height: 225px;
  margin-top: 20px;
  /* 伸缩 */
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
}

.wrap>div{
  width: 48%;
}

/* 3.1 渠道分布 */
.channel h3{
  font-size: 20px;
  color:#fff;
}

.channel .data{
  display: flex;
  /* 允许换行 */
  flex-wrap: wrap;
}

.channel .data .item{
  width: 50%;
  color: #4c9bfd;
  text-align: center;
}

.channel .data .item h4{
  font-size: 25px;
  color: #fff;
  margin: 18px 0px 8px;
}

/* 3.2 一季度销售进度 */
.quarter h3{
  font-size: 20px;
  color: #fff;
}

.quarter .chart{
  height: 95px;
  margin: 8px 0px;
  background-color: rgba(255, 255, 255, 0.1);
  /* 子绝父相定位 */
  position: relative;
}

.quarter .chart .circle{
  height: 95px;
}

.quarter .chart h4{
  /* 水平垂直居中 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  font-size: 25px;
  color: #fff;
}

.quarter .data{
  display: flex;
}

.quarter .data .item{
  flex: 1;
  color:#0bace6;
  font-size: 12px;
  text-align: center;
}

.quarter .data .item h4{
  font-size: 22px;
  color: #fff;
}





/* 4.全国热榜 */
.hot{
  height: 274px;
  margin-top: 20px;
}

.hot .inner{
  display: flex;
}

/* 左边列表 */
.hot .inner .left{
  flex: 1;
}

.hot .inner .left h3{
  font-size: 20px;
  color: #fff;
}

.hot .inner .left li{
  height: 55px;
  line-height: 55px;
  color: #4c9bfd;
  padding-left: 20px;
  margin-top: 10px;
}

.hot .inner .left li i{
  font-size: 32px;
  /* 字体图标居中对齐 */
  vertical-align: middle;
  margin-right: 10px;
}

/* 右边列表 */
.hot .inner .right{
  flex: 2;
}

.hot .inner .right .head{
  height: 20px;
  line-height: 20px;
  display: flex;
  font-size: 14px;
  color:#0bace6;
  /* 文字两端对齐 */
  justify-content: space-between;
}

.hot .inner .right .head h3{
  color: #fff;
  font-size: 20px;
}

.hot .inner .right .content{
  display: flex;
  margin-top: 20px;
}

.hot .inner .right .content ul{
  flex: 1;
}

.hot .inner .right .content ul li{
  height: 30px;
  line-height: 30px;
  display: flex;
  /* 两端对齐 */
  justify-content: space-between;
  font-size: 14px;
  color: #a3c6f2;
}

.hot .inner .right .content ul.ul-right li{
  color: #34a7b7;
  background-color: #02133d;
}

/* 左侧移入样式 */
.hot .inner .right .content ul.ul-left li.active{
  background-color: #02133d;
}

